<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="Cache-Control" content="no-siteapp"><!-- 百度不转码 -->
  <meta http-equiv="Cache-control" content="no-cache"> <!-- 不缓存 -->
  <meta content="telephone=no" name="format-detection"> <!-- 禁止手机自动将网页中的电话号码显示为拨号的超链接 -->
  <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><!-- "苹果手机专用"的改变顶部状态条的颜色 -->
  <meta content="yes" name="apple-mobile-web-app-capable"><!-- 开启对 web app 程序的支持 -->
  <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"><!-- 不允许缩放的1:1显示 -->
  <meta name="mobile-agent" content="format=html5;url=http://m.moerlong.com/"><!-- 自主适配，仅在百度移动搜索中有效 -->
  <meta name="applicable-device" content="mobile"><!-- 只适合在移动设备上进行浏览 -->
  <meta name="keywords" content="">
  <meta name="robots" content="index,follow"> <!-- 定义搜索引擎索引方式 -->
  <meta name="format-detection" content="telphone=no, email=no"/>
  <title></title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_847874_4dokpuo3ytv.css"/>
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/headfoot.css">
  <link rel="stylesheet" href="css/h.css">
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/swiper-3.4.2.min.js"></script>
 </head>
 <body>
<!--个人中心-->
<div class="head">
 <script>$(".head").load("heads.html");</script>
</div>
<div class="personal-content">
 <ul class="data">
  <li><a href="javascript:;" class="clearfloat pers-img"><span>头像</span> <p> <i> <img src="images/h/u=4254932828,2021369639&fm=26&gp=0.jpg" alt=""/></i> <span class="iconfont icon-jiantou2"></span></p></a></li>
  <li><a href="javascript:;" class="clearfloat" id="sex"><span>性别</span><p>女<span class="iconfont icon-jiantou2"></span></p></a></li>
  <li><a href="javascript:;" class="clearfloat"><span>身份</span><p>教师<span class="iconfont icon-jiantou2"></span></p></a></li>
  <li><a href="javascript:;" class="clearfloat"><span>手机号</span><p>15210403967<span class="iconfont icon-jiantou2"></span></p></a></li>
  <li><a href="javascript:;" class="clearfloat"><span>邮箱</span><p>1974488768@.com<span class="iconfont icon-jiantou2"></span></p></a></li>
 </ul>
 <div class="personal-btn">
  <a href="#">保存</a> <a href="#">退出账号</a> <div class="both"></div>
 </div>
 <div class="bounce" id="bounce">
  <div>
   <ul>
    <li>
     选择操作
    </li>
    <li>拍照
     <div class="chose-pic">
      <input type="file" accept="image/*;capture=camera">
     </div>
    </li>
    <li>从相册选取照片
     <div class="chose-pic">
      <input type="file" accept="images/*">
     </div>
    </li>
    <li class="last-qx"><a href="javascript:;" class="btns miss">取消</a></li>
   </ul>
  </div>
 </div>
 <div class="bounce" id="sexs">
  <div>
   <ul>
    <li class="chose-btn">
     <a href="#" class="miss">取消</a> <button>完成</button>
    </li>
    <li>男
     <div class="chose-pic">
      <input type="radio">
     </div>
    </li>
    <li class="nchose">女
     <div class="chose-pic">
      <input type="radio">
     </div>
    </li>
   </ul>
  </div>
 </div>
</div>
 <div class="foot">
  <script>$(".foot").load("foot.html");</script>
 </div>
<script>
 $(".pers-img").click(function () {
  $("#bounce").show(300);
 });
 $('.miss').click(function(){
  $('.bounce').hide(300);
 });
 $("#sex").click(function () {
  $("#sexs").show(300);
 })
</script>
 </body>
</html>
